<script setup>
    import { ref, toRaw } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import Type from '@components/search/type'
    import Search from '@components/search/index'
    import PageWrapper from '@components/PageWrapper.vue'
    import { common, service } from '@utils'
    import { Plus, Edit, View, CreditCard } from '@element-plus/icons-vue'
    import { usePremission, useRole } from '@hooks'
    import Detail from './Detail'
    // import rechargeFram from './rechargeFram'

    const premission = usePremission({
        view: 'wealth:accountBalance:detail'
    })

    const searchs = ref([
        {
            type: Type.SELECT,
            key: 'companyCode',
            width: 5,
            data: [],
            valueKey: 'companyCode',
            placeholder: '对应商户'
        },
        // {
        //     type: Type.INPUT,
        //     key: 'companyId',
        //     width: 5,
        //     placeholder: '商户 ID'
        // },
        {
            type: Type.INPUT,
            key: 'phone',
            width: 5,
            placeholder: '手机号'
        },
        {
            width: 6,
            type: Type.SEARCH_BUTTON
        }
    ])

    const pageRef = ref()
    const tableRef = ref()
    const detailRef = ref()
    const rechargeFramRef = ref()

    let queryForm = {}

    const onSearch = (param) => {
        queryForm = param
        pageRef.value.refresh()
    }

    const getData = async ({ pageNum, pageSize }, cb) => {
        const res = await service.fund.funds(pageNum, pageSize, queryForm)
        cb(res)
        setTimeout(() => {
            tableRef.value.scrollTo(0, 0)
        }, 0)
    }

    const getCompanys = async () => {
        const res = await service.auth.companyAll()
        searchs.value[0].data = res
    }

    getCompanys()
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table
                    ref="tableRef"
                    :loading="props.loading"
                    :data="props.tableData.records"
                    :max-height="common.tableHeight(true, 1)"
                    highlight-hover-row
                    round
                    stripe
                    border
                >
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="companyId" title="商户ID" />
                    <vxe-column field="companyName" title="所属商户" />
                    <vxe-column field="contactName" title="联系人" />
                    <vxe-column field="phone" title="手机号" />
                    <vxe-column field="balanceAmount" title="当前余额(元)" />
                    <vxe-column field="frozenAmount" title="提现中(元)" />
                    <!-- <vxe-column field="frozenAmount" title="风控账户余额(元)" /> -->
                    <vxe-column v-if="premission.view||true" title="操作" :width="120" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-tooltip
                                    effect="dark"
                                    content="明细"
                                    placement="top"
                                    :enterable="false"
                                >
                                    <el-button
                                        type="primary"
                                        plain
                                        :icon="View"
                                        size="small"
                                        circle
                                        @click="detailRef.open(row.accountNo)"
                                    ></el-button>
                                </el-tooltip>
                                <!-- <el-tooltip
                                    effect="dark"
                                    content="风控充值"
                                    placement="top"
                                    :enterable="false"
                                >
                                    <el-button
                                        type="primary"
                                        :icon="CreditCard"
                                        size="small"
                                        @click="rechargeFramRef.open(row, {
                                            label:row.companyName
                                        })"
                                        circle
                                    ></el-button>
                                </el-tooltip> -->
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <detail ref="detailRef" />
        <!-- <rechargeFram ref="rechargeFramRef" @refresh="() => pageRef.refresh(true)"/> -->
    </section>
</template>
